function $(id){
  return document.getElementById(id);
}

window.onload = function (){
   showBookInfo(bookArray);
}

/**
 * 显示书籍信息
 * @param books 书籍数组
 */
function showBookInfo(books){
    let str = "";
    books.forEach(n => {
        str += `<tr onclick="trClick(this,${n.id})"><td>${n.name}</td><td>${n.auth}</td><td>${n.price}</td></tr>`;
    });

    $("bookData").innerHTML = str;
}

let colorTr = null;
/**
 * 单击表格变色
 * @param trObj 点中tr对象
 */
function trClick(trObj,bookId){
    if(colorTr != null){
       colorTr.style.backgroundColor = "white";
    }
    trObj.style.backgroundColor = "yellow";
    colorTr = trObj;

    //得到id对应的对象
    let bookObj = bookArray.find(n => n.id == bookId);
    //将对象的属性填充span标签
    $("idSpan").innerHTML = bookId;
    $("bookNameSpan").innerHTML = bookObj.name;
    $("priceSpan").innerHTML = bookObj.price;
    $("authSpan").innerHTML = bookObj.auth;
    $("bookImg").src = "img/"+bookObj.imgPath;
}

/**
 * 查询书籍
 */
function searchBook(){
   /*按图书名进行筛选*/
   var newArray = bookArray.filter(n => n.name.indexOf($("searchName").value) != -1);
  showBookInfo(newArray);
}
